<template>
  <div>
    <!-- <van-notice-bar mode="closeable">欢迎来到科大酒店点餐！</van-notice-bar> -->
    <!-- 头部区域 -->
    <div class="home">
      <div class="title">
        <van-nav-bar id="banner" title="">
          <template #title>
            <div>
              养身汤吧线点餐
            </div>
          </template>
        </van-nav-bar>
        <van-sticky>
          <van-search v-model="searchvalue" @search="search" shape="round" placeholder="请输入产品分类名称" />
        </van-sticky>
      </div>
      <!-- 标签区域 -->

      <!-- <div class="tag">
        <van-row gutter="10">
          <van-col span="8">
            <van-button type="default">
              <span>酒水饮料品</span>
            </van-button>
          </van-col>
          <van-col span="8">
            <van-button type="default">酒水饮品</van-button>
          </van-col>
          <van-col span="8">
            <van-button type="default">酒水饮品</van-button>
          </van-col>
        </van-row>
      </div> -->
      <!-- 轮播图 -->
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in swipeData" :key="item.id">
            <img :src="item.url" alt="" />
          </van-swipe-item>

        </van-swipe>
      </div>
      <!-- 分类 -->
      <div class="category">
        <van-grid square>
          <van-grid-item v-for="item in icon_CATEGORYDATA" :key="item.id" :icon="item.icon" :text="item.name"
            @click="toProductPage(item)" />
        </van-grid>
      </div>


      <!-- 产品展示 -->
      <div class="product">

        <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad"
          :offset="10">
          <van-cell v-for="item in productData" :key="item.id">
            <van-card tag="热销" :price="item.price" :desc="item.description" :title="item.name" :thumb="item.photo"
              :origin-price="item.price-item.price*0.1" @click="searchProductDetail(item)">
              <template #tags>
                <van-tag plain type="danger">{{item.category.name}}</van-tag>
              </template>
              <template #footer>
                <van-button size="mini">点击查看详情</van-button>
              </template>
            </van-card>
          </van-cell>

        </van-list>

        <div class="footer"></div>

      </div>
      <!-- 产品展示详情 -->
      <van-popup class="showDetail" v-model="show">
        <!-- 定义结构 -->
        <div class="content">

          <!-- 菜品名称 -->
          <div class="box">
            <!-- 图片 -->
            <div class="proImg">
              <img :src="productDetailData.photo" alt="">
            </div>
            <div class="proTitle">{{productDetailData.name}}</div>
            <!-- 价格 -->
            <div class="price">
              ￥{{productDetailData.price}}/{{productDetailData.unit}}
            </div>
          </div>

          <!-- 分割线 -->
          <!-- <div class="line"></div> -->

          <!-- 详情描述 -->
          <div class="desc">
            <div style="font-size:18px;font-weight:bold;">详情</div>
            {{productDetailData.description}}
          </div>
        </div>
      </van-popup>

      <!-- 产品展示详情 -->
      <!-- <van-action-sheet v-model="show" title="菜品详情">
      
      </van-action-sheet> -->
    </div>
  </div>

</template>

<script>
  import {
    get,
    post
  } from '@/http/axios.js';

  import {
    mapActions,
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        //轮播图数组
        swipeData: [],
        productDetailData: {},
        show: false,
        actionTitle: '',
        loading: false,
        finished: false,
        page: 1,
        pageSize: 12,
        tips: ['鲜榨饮品', '123'],
        i: 0,
        searchvalue: ''
      }
    },
    methods: {
      ...mapActions('category', ['getCategoryDataVuex', 'findCategoryIdByName']),
      ...mapActions('product', ['getProductDataVuex']),
      ...mapMutations('product', ['GET_PRODUCTDATA']),
      async getSwipeData() {
        let res = await get('carousel/findAll')
        this.swipeData = res.data.data
      },


      getCategortData() {
        this.getCategoryDataVuex({
          page: 1,
          pageSize: 9
        })
      },

      getProductData() {
        this.getProductDataVuex({
          page: this.page,
          pageSize: this.pageSize,
          status: '正常'
        })
      },

      //弹出动态面板显示产品信息
      searchProductDetail(item) {

        this.show = true;
        this.product = {}
        this.actionTitle = item.name;
        this.productDetailData = item;
      },

      //跳转到产品页面
      toProductPage(category) {
    //    console.log(category.num)
        this.$router.push({
          path: '/manager/product',
          query: {
            activeKey: category.num - 1,
            productCategoryId: category.id
          }
        })
      },
      onLoad() {

        setTimeout(() => {
          this.pageSize += 5;
          this.getProductData()
          this.loading = false
          if (this.productData.length < 30)
            this.finished = false
          else
            this.finished = true
        }, 2000);
      },

      search() {

        this.findCategoryIdByName({
          page: 1,
          pageSize: 11,
          name: this.searchvalue.trim()
        })
        
        setTimeout(() => {
          if (this.categoryId.length == 0) {
            this.$toast.fail('未查询到该结果！')
            this.searchvalue = '';
          } else {
            this.$router.push({
              path: '/manager/product',
              query: {
                activeKey: this.categoryId[0].num - 1,
                productCategoryId: this.categoryId[0].id
              }
            })
          }
        }, 500);


      }
    },
    computed: {
      ...mapState('category', ['categoryData', 'categoryId']),
      ...mapState('product', ['productData']),
      ...mapGetters('category',['icon_CATEGORYDATA'])
    },
    created() {
      this.getSwipeData()
      this.getCategortData()
      this.getProductData()
    },

  }
</script>

<style scoped>
  /* 测试轮播图数据 */
  .home .swipe {
    width: 90%;
    height: 120px;
    /* position: absolute; */
    margin-top: 60px;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px 0 #aaaaaa;
    border-radius: 8px;
  }

  .swipe img {
    height: 160px;
    width: 100%;
    border-radius: 8px;
  }

  .home #banner {
    background-color: #409eff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .home #banner div {
    color: whitesmoke;

  }

  /* .van-nav-bar {
    background-color: #409eff;
  } */

  .tag {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .tag span {
    font-size: 12px;
  }

  .content {
    padding: 16px 16px 160px;
  }

  .van-action-sheet {
    height: 400px;
  }

  .footer {
    text-align: center;
    height: 100px;
    color: gray;
  }

  .content {
    padding: 16px 16px 160px;
    text-align: center;
    display: flex;
  }

  .box {
    width: 100px;
    height: 100px;
    /* background-color: #409eff; */
  }

  .desc {
    width: 200px;
    height: 200px;
    font-size: 12px;
  }

  /* 图片样式 */
  .content .proImg img {
    height: 50px;
  }

  /* 菜品名称 */
  .content .proTitle {
    font-size: 12px;
    font-weight: bold;
  }

  /* 菜品价格 */
  .content .price {
    color: red;
    font-size: 14px;
  }

  /* 分割线 */
  /* .content .line {
    padding: 0 20px 0;
    margin: 20px 0;
    border: 1px solid;
  } */
  .showDetail {
    height: 150px;
    width: 350px;

  }
</style>